<template>
  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true" @submit.native.prevent="() => handleQuery()">
<!--              <el-form-item label="" label-width="80px" prop="customerName">-->
<!--                <el-input v-model="list_params.name" placeholder="箱规名称搜索" ></el-input>-->
<!--              </el-form-item>-->
              <el-form-item label="货主" prop="cargoOwnerId">
                <el-select filterable  v-model="list_params.cargoOwnerId" placeholder="请选择货主" clearable filterable :style="{width: '100%'}">
                  <el-option label="全部货主" value="" ></el-option>
                  <el-option v-for="item in owner_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
                <el-form-item label="产品" prop="productName">
                  <el-select filterable  v-model="list_params.productName" placeholder="请选择产品" clearable filterable :style="{width: '100%'}">
                    <el-option label="全部产品" value="" ></el-option>
                    <el-option v-for="item in all_product_list" :key="item.name" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                <el-button type="primary"  size="mini" native-type="submit">搜索</el-button>
                <el-button  size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
          <div>
<!--            <el-button>删除</el-button>-->
            <el-button @click="handleEnable(0)" >禁用</el-button>
            <el-button @click="handleEnable(1)" >启用</el-button>
            <!-- <el-button @click="handleExport">导出</el-button>
            <el-button>导入</el-button> -->
            <el-button type="primary" @click="addInfo" >新增</el-button>
          </div>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="table_data" @selection-change="handleSelectionChange"  :height="table_height" >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="货主" prop="cargoOwnerName"></el-table-column>
            <el-table-column label=产品名称 prop="productName"></el-table-column>
            <el-table-column label="箱规" prop="unitId">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <div>{{scope.row.weight}}kg/</div>
                  <dict-tag :options="dict.type.unit" :value="scope.row.unitId"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="状态" >
              <template slot-scope="scope" >
                <div style="color: #111928;" v-if="scope.row.enable==1" >启用</div>
                <div style="color: #EB4646;" v-else >禁用</div>
              </template>
            </el-table-column>
            <el-table-column label="操作">

              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="editInfo(scope.row)"
                >编辑</el-button>
                <el-popconfirm
                  title="确认要删除该箱规吗?"
                  @confirm="c_delete(scope.row)"
                >
                  <el-button
                    slot="reference"
                    size="mini"
                    type="text"
                  >删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-dialog  :visible.sync="dialog_show" title="添加客户" width="680px" style="border-radius: 10px;" @close="close">
      <el-form :model="formData" ref="form" :rules="rules" label-width="100px" size="small" >
        <el-row>
          <el-col>
            <el-form-item label="重量(KG)" prop="weight" >
              <el-input v-model="formData.weight" placeholder="请输入重量" type="number" ></el-input>
            </el-form-item>
            <el-form-item label="单位" prop="unitId" >
              <el-select filterable  v-model="formData.unitId" placeholder="请选择数量单位" clearable filterable :style="{width: '100%'}">
                <el-option v-for="dict in dict.type.unit" :key="dict.value" :label="dict.label"
                           :value="dict.value"  ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联货主" prop="cargoOwnerId">
              <el-select filterable  v-model="formData.cargoOwnerId" placeholder="请选择关联货主" clearable filterable :style="{width: '100%'}" @change="onOwnerChange">
                <el-option v-for="owner in owner_list" :key="owner.id" :label="owner.name"
                           :value="owner.id"  ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联产品" prop="productId">
              <el-select filterable  v-model="formData.productId" placeholder="请选择关联产品" clearable filterable :style="{width: '100%'}">
                <el-option v-for="owner in product_list" :key="owner.id" :label="owner.name"
                           :value="owner.id"  ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="启用" prop="enable">
              <el-switch v-model="formData.enable" :active-value="1" :inactive-value="0"  ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="title" style="background: #F3F4F6;margin: -20px;padding: 20px;height: 58px;border-radius: 10px;">{{ formData.id?'编辑':'添加' }}</div>
      <div slot="footer" >
        <el-button @click="close" >取消</el-button>
        <el-button type="primary"  @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {list,del,add,update,detail,handleEnable} from '@/api/product/box_spec'
import {list as ownerList} from "@/api/base/owner";
import {list as productList,AllList} from "@/api/product/info";
export default {
  name: 'info',
  dicts:['unit'],
  data() {
    return {
      table_height:window.innerHeight - 300,
      list_params: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        cargoOwnerId:'',
        productName:''
      },
      list_total: 0,
      table_data: [],
      formData: {
        enable: 1
      },
      rules: {
        weight:[{required: true, message: '请输入箱规重量', trigger: 'blur'}],
        cargoOwnerId:[{required: true, message: '请选择货主', trigger: 'change'}],
        productId:[{required: true, message: '请选择产品', trigger: 'change'}],
        unitId:[{required: true, message: '请选择单位', trigger: 'change'}]
      },
      dialog_show: false,
      owner_list:[],
      product_list:[],
      ids:[],
      all_product_list:[],
    }
  },
  created() {
    this.getList()
    this.getOwnerList()
    this.getAllProductList()
  },
  methods: {
    getAllProductList(){
      AllList({}).then(res => {
        this.all_product_list = res.rows;
      })
    },
    getProductList(){
      productList({cargoOwnerId:this.formData.cargoOwnerId,is_page:0}).then(res => {
        this.product_list = res.rows;
      })
    },
    getOwnerList(){
      ownerList({is_page:0}).then(res => {
        this.owner_list = res.rows;
      })
    },
    getList() {
      list(this.list_params).then(res => {
        this.table_data = res.rows
        this.list_total = res.total
      })
    },
    handleQuery() {
      this.list_params.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.list_params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
    },
    handleExport() {
      this.download('xnf/box/specification/export', {
      }, `spec${new Date().getTime()}.xlsx`)
    },
    handleEnable(enable) {
      if (this.ids.length == 0){
        this.$message({
          message: '请选择要操作的数据',
          type: 'warning'
        });
        return;
      }
      handleEnable(this.ids,enable).then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    addInfo() {
      this.formData = {enable: 0}
      this.dialog_show = true
    },
    editInfo(row){
      debugger
      let id = row.id;
      detail(id).then(res => {
        this.formData = {
          ...res.data,
          // cargoOwnerId:res.data.cargoOwnerId+'',
          // productId:res.data.productId+'',
          unitId:res.data.unitId+'',
        }
        this.getProductList()
        this.dialog_show = true
      })
    },

    c_delete(row){
      let id = row.id;
      del(id).then(res=>{
        this.getList()
      })
    },
    handleConfirm(){
      this.$refs['form'].validate((valid)=> {
        if (valid) {
          if (this.formData.id){
            update(this.formData).then((res)=>{
              this.$message.success('编辑成功')
              this.getList()
              this.close()
            })
          }else {
            add(this.formData).then((res)=>{
              this.$message.success('添加成功')
              this.getList()
              this.close()
            })
          }
        }
      })
    },
    close() {
      this.dialog_show = false
    },
    onOwnerChange(e){
      this.formData = {
        ...this.formData,
        productId:''
      }
      if (e == ''){
        this.product_list = [];
        return;
      }
      this.getProductList()
    }
  }
}
</script>

<style scoped>

</style>
